<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
            <el-breadcrumb-item :to="{ path: '/' }">bug管理</el-breadcrumb-item>
            <el-breadcrumb-item>bug列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-divider></el-divider>

        <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row>
            <el-table-column label="编号" width="80" align="center">
                <template scope="scope">
                    <span>{{ scope.$index + 1 }} </span>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="bug描述" width="150" align="center"/>
            <el-table-column prop="proName" label="项目名称" width="150" align="center"/>
            <el-table-column prop="nickname" label="提交者" width="250" align="center"/>
            <el-table-column prop="state" label="状态" width="80" align="center"/>
            <el-table-column prop="createDate" label="时间" width="180" align="center"/>
            <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                    <el-button
                            type="danger"
                            icon="el-icon-delete"
                            circle
                            size="mini"
                            @click="openDeleteConfirm(scope.row)"
                    />
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                align="center"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="limits"
                layout="prev, pager, next, jumper"
                :total="count">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0,
                currentPage: 1,
                limits: 3,
                list: [],
                listLoading: true
            }
        },
        methods: {
            /* 查询知识点总数 */
            countBug() {
                console.log('countBug');
                let url = 'http://localhost:8989/bugs/countBug';
                console.log('url = ' + url);
                this.axios.get(url)
                    .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                    .then((response) => {
                        let responseBody = response.data;
                        this.count = responseBody.data;
                    })
            },
            /* 分页查询 */
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                console.log("条数:" + this.limits);
                let start = val - 1;
                let limit = this.limits;
                if ((this.count - (start * this.limits)) < 3) {
                    limit = this.count - (start * this.limits)
                }
                console.log("条数:" + limit);
                let url = 'http://localhost:8989/bugs' + start + '/' + limit + '/bugPageList';
                console.log('url = ' + url);
                this.listLoading = true;
                this.axios
                    .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                    .get(url).then((response) => {
                    let responseBody = response.data;
                    this.list = responseBody.data;
                    this.listLoading = false;
                })
            },
            /* 详情 */
            bugDetail(id) {
                this.$router.push({path: '/bugs/detail', query: {id}})
            },
            bugResultDetails(id){
                this.$router.push({path: '/bugs/detail', query: {id}})
            },
            /* 修改 */
            handleEdit(id) {
                this.$router.push({path: '/bugs/update', query: {id}})
            },
            /* 删除 */
            handleDelete(bug) {
                let url = 'http://localhost:8989/bugs/' + bug.id + '/delete';
                console.log('url = ' + url);
                this.axios
                    .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                    .post(url).then((response) => {
                    let responseBody = response.data;
                    console.log(responseBody);
                    if (responseBody.state != 20000) {
                        this.$message.error(responseBody.message);
                    }
                    if (responseBody.state == 20000 || responseBody.state == 40400) {
                        this.loadBugList();
                    }
                })
            },
            openDeleteConfirm(bug) {
                const message = '此操作将删除【' + bug.bugledge + '】知识点，是否继续？';
                this.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(bug);
                }).catch(() => {
                });
            },
            /* 首次访问查询知识点列表 */
            loadBugList() {
                console.log('loadBugList');
                let url = 'http://localhost:8989/bugs/0/3/bugPageList';
                console.log('url = ' + url);
                this.listLoading = true;
                this.axios
                    .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                    .get(url).then((response) => {
                    let responseBody = response.data;
                    this.list = responseBody.data;
                    this.listLoading = false;
                })
            }
        },
        mounted() {
            console.log('初始化项目列表数据');
            this.loadBugList();
            this.countBug();
        }
    }

</script>
